<template>
  <div class="demo-list">
    <div class="list-wrapper" v-for="(item, key, i) in demoList" :key="key">
      <p>{{i+1}}.{{item.name}}</p>
      <router-link 
        v-for="(route, index) in item.list" 
        :key="route.name"
        :to="route">
        {{index+1}}.{{route.name}}
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demoList',
  data() {
    return {
      demoList: {}
    }
  },
  mounted() {
    this.getRouterList();
  },
  methods: {
   getRouterList() {
      let routerList = this.$router.options.routes,
          obj = {},
          _route = {};
      this.demoList = {};
      for(let item of routerList) {
        _route = item.meta.group;
        if(!obj[_route.id]) {
          obj[_route.id] = {
            name: _route.name,
            list: []
          }
        }
        obj[_route.id].list.push(item)
      }
      this.demoList = Object.assign({}, obj, this.demoList);
      // console.log(this.demoList)
    } 
  }
}
</script>
<style lang="scss" scoped>
.demo-list{
  display: flex;
  .list-wrapper{
    width: 25%;
    a{
      display: block;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>